<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限管理-右边的数据列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/resources/favicon.ico">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/resources/css/public.css" media="all"/>
    <link rel="stylesheet" href="/resources/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form" method="post" id="searchFrm">
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-inline">
                <label class="layui-form-label">权限名称:</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入权限名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">权限编码:</label>
                <div class="layui-input-inline">
                    <input type="text" name="percode" placeholder="请输入权限编码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="doSearch"><span class='layui-icon'>&#xe615;</span>搜索
                </button>
                <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置
                </button>
            </div>
        </div>
    </form>
</blockquote>
<table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
<!--表头-->
<div id="permissionTableToolBar" style="display: none;">
    <a class="layui-btn layui-btn-sm ToolBar" rel="add"><span class="layui-icon">&#xe61f;</span>添加</a>
</div>
<!--操作-->
<div type="text/html" id="permissionTableRowBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="update"><span class="layui-icon">&#xe642;</span>编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
</div>

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 3px" id="saveOrUpdateDiv">
    <form id="dataFrm" lay-filter="dataFrm" class="layui-form layui-form-pane">
		<input type="hidden" class="subType">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <ul id="menuTree" class="dtree" data-id="0"></ul>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限名称:</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入权限名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限编码:</label>
            <div class="layui-input-block">
                <input type="text" name="percode" autocomplete="off" placeholder="请输入权限编码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否可用:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="available" value="1" title="可用" checked="">
                    <input type="radio" name="available" value="0" title="不可用">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序码:</label>
            <div class="layui-input-block">
                <input type="text" name="ordernum" id="ordernum" lay-verify="required|number" autocomplete="off"
                       placeholder="请输入排序码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <button type="button" class="layui-btn" lay-filter="doSubmit" lay-submit=""><span class='layui-icon'>&#xe609;</span>提交
            </button>
            <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层结束 -->


<script type="text/javascript" src="/resources/layui/layui.js"></script>

<script type="text/javascript">
    var tableIns;
    var $;
    layui.extend({
        dtree: '/resources/dtree/dtree'
    }).use(['dtree', 'layer', 'jquery', 'table', 'form'], function () {
        var dtree = layui.dtree;
        var layer = layui.layer;
        $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;

        //数据加载
        //渲染数据表格
        tableIns = table.render({
            elem: '#permissionTable'
            , url: '/permission/getPermissionList'
            , toolbar: '#permissionTableToolBar' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'print']
            , title: '权限数据表'
            , height: 'full-150'
            , cols: [ [
                {field: 'id', title: 'ID', align: 'center', fixed: 'left'}
                , {field: 'pid', title: '父级ID', align: 'center'}
                , {field: 'title', title: '权限名称', align: 'center'}
                , {field: 'percode', title: '权限编码', align: 'center'}
                , {
                    field: 'available', title: '是否可用', align: 'center', templet: function (d) {
                        return d.available == 1 ? '<font color=blue>可用</font>' : '<font color=red>不可用</font>';
                    }
                }
                , {field: 'ordernum', title: '排序码', align: 'center'}
                , {fixed: 'right', title: '操作', toolbar: '#permissionTableRowBar', align: 'center', width: '150'}
            ] ]
            , page: true
            , done: function (res, curr, count) {  //res代表后台返回的数据  curr当前页   count 数据总条数
                if (res.data.length == 0 && curr != 1) {
                    tableIns.reload({page: {curr: curr - 1}});
                }
            }
        });
        //模糊查询
        $("#doSearch").click(function () {
            var params = $("#searchFrm").serialize();
            tableIns.reload({
                url: '/permission/getPermissionList?' + params,
                page: {
                    curr: 1
                }
            })
        });
        //监听表头按钮的事件
		$(".childrenBody").on("click",'.ToolBar', function(){
            switch ($(this).attr("rel")) {
                case 'add':
                	$(".subType").val("add");
                    openAddLayer();
                    break;
            }
            ;
        });

        //监听行按钮的事件
        table.on('tool(permissionTable)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'update') { //修改
				$(".subType").val("update");
                openUpdateLayer(data);
            } else if (layEvent === 'del') { //删除
                deletePermission(data);
            }
        });

        var mainIndex;
        var url;
        // //打开添加的弹出层
        function openAddLayer(){
        	mainIndex=layer.open({
        		 type: 1,
        		 title:'添加权限',
        		 skin: 'layui-layer-molv', //加上边框
        		 area: ['800px', '400px'], //宽高
        		 content: $("#saveOrUpdateDiv"),
        		 success:function(index){
        			 url="/permission/addPermission";
        			 $("#dataFrm")[0].reset();
        			 //重新加树
        			 addOrUpdateMenuTree.refreshTree();
        			 //加载最大的排序码
        			 $.post("/permission/loadPermissionMaxOrderNum",function(obj){
        				 $("#ordernum").val(obj.data);
        			 });
        			 $(".dtree-select").removeClass("dtree-select-show");//解决弹出层里面的下列树展开的问题
        		 }

        	})
        };
        //打开修改的弹出层
        function openUpdateLayer(data){
        	mainIndex=layer.open({
        		 type: 1,
        		 title:'修改权限',
        		 skin: 'layui-layer-molv', //加上边框
        		 area: ['800px', '600px'], //宽高
        		 content: $("#saveOrUpdateDiv"),
        		 success:function(index){
        			 url="/permission/updatePermissionView?id="+data.id;
        			 $("#dataFrm")[0].reset();
        			 // form.val("dataFrm",data);
                     $.get(url,function(obj) {
                         $("input[name=id]").val(obj.data.id);
                         $("input[name=title]").val(obj.data.title);
                         $("input[name=percode]").val(obj.data.percode);
                         initradio('available', obj.data.available);
                         $("#ordernum").val(obj.data.ordernum);
                     });
        			 //初始化下拉列表的值
        			 dtree.dataInit("menuTree", data.pid+"");
        			 var selectParam = dtree.selectVal("menuTree"); //设置选中的值
        			 $(".dtree-select").removeClass("dtree-select-show");//解决弹出层里面的下列树展开的问题
        		 }

        	})
        };

        //监听提交按钮的事件
        form.on("submit(doSubmit)",function(data){
        	var params=$("#dataFrm").serialize();
			var subType = $('.subType').val();
			if(subType == "add"){
				url = "/permission/addPermission";
			}else{
				url = "/permission/updatePermission";
			}
        	//提交 数据
        	 $.post(url,params,function(obj){
        		if(obj.code==200){
        			tableIns.reload();//重载表格
        		}
        		layer.msg(obj.msg);
        		layer.close(mainIndex);
        	})
        	return false;//阻止同步提交
        });


        //渲染添加和修改页面的下拉树
        var addOrUpdateMenuTree=dtree.renderSelect({
        	  elem: "#menuTree",
        	  url: "/menu/loadAllMenuTreeJson",
        	  dataStyle: "layuiStyle",  //使用layui风格的数据格式
        	  dataFormat: "list",  //配置data的风格为list
        	  selectTips: "请选父级权限",
        	  selectInputName: {
        		    nodeId: "pid"//,  //提交到后台的权限ID的key
        		   // context: "pname"//提交到后台的权限名称
        	  },
        	  response:{message:"msg",statusCode:0} //修改response中返回数据的定义
        	  //,skin: "layui"
        });

        //删除
        function deletePermission(data){
        	layer.confirm("真的删除【"+data.title+"】权限么?", function(index){
        	      //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        	      layer.close(index);
        	      //向服务端发送删除指令
        	      $.post("/permission/deletePermission",{id:data.id},function(obj){
        	    	  if(obj.code==200){
        	    		  tableIns.reload();//重载表格
        	    	  }
        	    	  layer.msg(obj.msg);
        	      })
        	    });
        }
    });

    //给左边的树节点点击事件调用的
    function reloadTable(id) {
        var params = $("#searchFrm").serialize() + "&id=" + id;
        tableIns.reload({
            url: '/permission/getPermissionList?' + params,
            page: {
                curr: 1
            }
        })
    }

    function initradio(rName,rValue){
        var rObj = document.getElementsByName(rName);

        for(var i = 0;i < rObj.length;i++){
            if(rObj[i].value == rValue){
                rObj[i].checked =  'checked';
            }
        }
    }
</script>


</body>
</html>